<html>
<head>
    <meta charset="utf-8">
    <title>规格添加</title>
    <#assign base=request.contextPath  />
    <#setting  number_format="0.##"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${base}/backstage/layui/css/layui.css" media="all">
    <script src="${base}/sweep/js/mui.min.js"></script>
    <script src="${base}/backstage/layui/layui.js"></script>
    <script src="${base}/backstage/wangEdit/wangEditor.js"></script>
    <script src="${base}/backstage/js/jquery-1.8.3.min.js"></script>
    <script>
        var base =  "${base}";
    </script>
    <script src="${base}/backstage/js/ipNameUrl.js"></script>
</head>
<body>
<form class="layui-form " action="" style="padding-left: 15px;">
<br>
<br>
    <div class="layui-form-item">
        <label class="layui-form-label">商品分类</label>
        <div class="layui-input-block">
            <select name="modules" id="commodityId" lay-verify="required" lay-search="" lay-filter="commodityId">
                <option value="">直接选择类型</option>
                <#list commodity as commodity>
                    <option value="${commodity.id}">${commodity.name}</option>
                </#list>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">分类名称</label>
        <div class="layui-input-block">
            <select name="modules" id="classificationId" lay-verify="required" lay-filter="classificationId" lay-search="">
            </select>
        </div>
    </div>
    <div class="layui-collapse" lay-accordion="" >
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">规格大小</h2>
            <div class="layui-colla-content layui-show">
                <table class="layui-hide" id="test" lay-filter="test"></table>
            </div>
        </div>
    </div>

<br>
<br>
    <div align="center">
        <button type="button" class="layui-btn" id="saveButton">保存</button>
        <button type="button" class="layui-btn" onclick="window.history.back(-1);">返回</button>
    </div>
    <br>
    <br>
</form>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!--派工单-->
<script type="text/html" id="toolbarDemo" >
    <form class="layui-form " action="" >
        <div class="layui-form-item">
            <label class="layui-form-label">大小规格</label>
            <div class="layui-input-block">
                <input class="layui-input" name="size" id="size" placeholder="请输入大小规格" autocomplete="off">
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-event="add">添加大小规格</button>
            </div>
        </div>
    </form>
</script>

</body>
<script>

    var form;
    layui.use(['table', 'form', 'layedit', 'laydate', 'layer','element'], function () {
        form = layui.form
        var table = layui.table
            , $ = layui.jquery
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate
            , layer = layui.layer;

        table.render({
            skin: 'line' //行边框风格
            , even: true //开启隔行背景
            , elem: '#test'
            , toolbar: '#toolbarDemo'
            ,data:[]
            , cols: [[
                {field: 'size', title: '规格大小',align: 'center'},
                {field: '', title: '操作',toolbar: '#barDemo',align: 'center'},
            ]]
            , id: 'testReload'
            ,limits:[999999]
            ,limit:999999
        });
        //添加表格
        table.on('toolbar(test)', function (obj) {
            switch (obj.event) {
                case 'add':
                    if($("#size").val()==""){
                        layer.msg("规格大小不能为空")
                        return
                    }

                    var prodJson = {
                        size:$("#size").val()
                    }
                    layui.table.cache.testReload.push(prodJson);
                    table.reload('testReload',{
                        data: layui.table.cache.testReload
                    });
                    break;
            };

        });

        //删除数据
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确定删除吗？', function(index){
                    obj.del();
                    layer.close(index);
                });
            }
        });


        layui.form.on('select(commodityId)', function(data) {
            var commodityId =  data.value;
            $.ajax({
                type: "GET",
                url: "${base}/admin/public/selectClassifitcation",
                dataType: "json",
                data:{id:commodityId},
                success: function (data) {
                    if(data.code==200){
                        $("#classificationId").html("")
                        $("#classificationId").append(
                            ' <option value=""  >直接选择分类名称</option>'
                        )
                        for (var i = 0; i < data.data.length; i++) {
                            $("#classificationId").append(
                                ' <option value="' + data.data[i].id+ '"  >' + data.data[i].name + '</option>'
                            )

                        }
                        layui.form.render(); //更新全部
                    }

                }
            });
        });

    })

    $("#saveButton").on("click", function () {


        if ($("#commodityId").val()=="") {
            layer.msg("请填写商品分类！")
            return;
        }
        if ($("#classificationId").val()=="") {
            layer.msg("请填写分类名称！")
            return;
        }
        var formDate = {
            commodityId: $("#commodityId").val(),
            classificationId: $("#classificationId").val(),
            prods:JSON.stringify(layui.table.cache.testReload),
        }

        $.ajax({
            type: "POST",
            url: "${base}/admin/sizeClassification/save",
            data: formDate,
            success: function (data) {
                if (data.code === 200) {
                    layer.msg(data.msg)
                    window.location.href = "${base}/admin/sizeClassification/sizeClassification.html"
                } else {
                    layer.msg(data.msg)
                }
            }
        });
    })
</script>
</html>


